<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="/css/main.css">
    <style>
        /**头部样式*/
        .zh-headerbox{height: 200px;text-align: center;background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3827122839,3302242264&fm=26&gp=0.jpg") #FAFAFA;color: #fff;}
        .zh-headerbox .title{font-size: 24px;}
        .zh-headerbox .zh-cheade-box{width: 640px;text-align: center;margin: 0 auto; }
    </style>

    <style>
        /**主题样式  */
        .zh-section{margin-top: 10px;}
    </style>
</head>
<body>
    <div id="app">
        <input type="hidden" id="stateId" th:value="${id}">
        <!--头部-->
        <header>
            <div class="zh-headerbox">
                <div class="zh-cheade-box">
                    <h3 class="title pt30">{{stateVo.title}}</h3>
                    <div class="pt15" v-html="stateVo.description"></div>
                    <div class="pt10">
                        <span class="mr15">参与人数：{{stateVo.personNum}}</span>
                        <span>统计时间：{{stateVo.createTime}}</span>
                    </div>
                </div>
            </div>
        </header>

        <!--主题内容-->
        <section class="zh-section">
            <div class="layui-container">
                <div class="layui-row" >
                    <div class="layui-col-md19">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <div id="main" style="width: 1000px;height:500px; margin: 0 auto;"></div>
                    </div>
                </div>
            </div>
        </section>

        <!--底部-->
        <footer>
            <div class="layui-container">
                <div class="layui-row" style="text-align: center;">
                    <div class="layui-col-md12 tc">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <p class="b f20">统计剩余：{{stateVo.endTime}}</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/echarts/echarts.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                stateId: "",
                stateVo:{}
            },
            created: function(){
                this.stateId = document.getElementById("stateId").value;
              // 查询统计数据信息
              this.loadStateDetail();
            },
            methods: {
                // 查询统计数据信息
                loadStateDetail:function(){
                    var that = this;
                    axios.get("/state/detail?id="+this.stateId).then(function (res) {
                        that.stateVo = res.data.result;
                        var stateDetailList = res.data.result.stateDetailList;
                        // 加载统计报表图
                        that.loadCharts(stateDetailList);
                    }).catch(function (res) {
                        // 请求错误
                        console.log("res->",res);
                    })
                },
                // 统计报表的加载
                loadCharts:function (stateDetailList) {
                    console.log(stateDetailList)
                    if (null == stateDetailList || stateDetailList.length == 0) return;
                    var xAxisData = []; // 定义图标项数据
                    var seriesDate = []; // 定义项的数量数据
                    for (var i = 0; i < stateDetailList.length; i++){
                        xAxisData.push(stateDetailList[i].title);
                        seriesDate.push(stateDetailList[i].itemnum);
                    }

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    option = {
                        xAxis: {
                            type: 'category',
                            data: xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: seriesDate,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        })
    </script>
</body>
</html>